revision:
<div class="flex-container">
<iframe class="one" src="../images/Wuzhen-20-10_01.mp4" frameborder="2"></iframe>
<iframe class="two" src="../images/Wuzhen-20-10_01.mp4" height="300" width="300"></iframe>
<iframe class="three" src="../images/Wuzhen-20-10_01.mp4" height="20%" width="20%"></iframe>
<iframe class="four" height="300" width="300" src="../images/Wuzhen-20-10_01.mp4" style="border:none;"></iframe>
</div>
<style>
.flex-container{display: flex; flex-flow: row wrap; justify-content: start; width: 96vw;height:70vh;}
.one{ margin: 1vw; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 1vw; -moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; transform:rotate(20deg); -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); -ms-transform:rotate(20deg);}
.two{ margin: 1vw; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 1vw; -moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; transform:rotate(-20deg); -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg); -ms-transform:rotate(-20deg);}
.three{ margin: 1vw; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 1vw; -moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); -ms-transform:rotate(5deg);}
.four{ margin: 1vw; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 1vw; -moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; transform:rotate(20deg); -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); -ms-transform:rotate(20deg);}
</style>
<div class="resp-container">
<iframe width="450" height="220" class="if" src="../images/ducks.gif" title="ducks crossing the street" allowfullscreen></iframe>
<iframe width="235" height="170" class="if" src="../images/gif2.gif" title="don't play with the duck" allowfullscreen></iframe>
<iframe width="450" height="250" class="if" src="../images/gif1.gif" title="look out" allowfullscreen></iframe>
<iframe width="320" height="260" class="if" src="../images/gif3.gif" title="dog answering the door" allowfullscreen></iframe>
</div>
<style>
.resp-container { display: inline-block; position: relative; overflow: hidden; width: auto; height: auto;}
iframe .if{display: inline-block; border: 0.5vw double burlywood; }
iframe .if{ margin: 2vw; -moz-border-radius: 12px; -webkit-border-radius: 10px; border-radius: 12vw; -moz-box-shadow: 4px 4px 14px #000; -webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; transform:rotate(15deg); -moz-transform:rotate(15deg); -webkit-transform:rotate(15deg); -o-transform:rotate(15deg); -ms-transform:rotate(15deg);}
</style>
click the link here below
<div>
<iframe width="460" height="400" class="ifr" src="../images/blog-20-12-13.pdf" ></iframe>
<iframe width="460" height="400" class="ifr" src="../images/5a.jpg" ></iframe>
<iframe width="460" height="400" class="ifr" src="../images/5a.jpg"></iframe>
<iframe width="460" height="400" class="ifr" src="../images/Wuzhen-20-10_02.mp4" ></iframe>
<iframe src="../images/demo_iframe.htm" name="iframe_a" class="ifr" height="400px" width="50%" title="iframe Example"></iframe>
<p><small>click the link here below</small></p>
<p><a href="https://www.lwitters.com" target="iframe_a">lwitters.com</a></p>
</div>
<style>
iframe .ifr{ margin: 8vw; -moz-border-radius: 12px; -webkit-border-radius: 10px; border-radius: 12vw; -moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; transform:rotate(-15deg); -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg); -ms-transform:rotate(-15deg);}
a{font-size: 5vw; font-weight: bold;}
</style>